<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楚地灵韵 - 首页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <header class="app-header">
            <div class="header-content">
                <div class="logo">楚地灵韵</div>
                <div class="header-icons">
                    <div class="icon-button">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div class="icon-button">
                        <i class="fas fa-user"></i>
                    </div>
                </div>
            </div>
        </header>

        <div class="app-content">
            <!-- Search bar -->
            <div class="search-container">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索楚文化景点、活动或展览">
                </div>
            </div>

            <!-- Hero banner carousel -->
            <div class="carousel-container">
                <div class="carousel-slide active">
                    <img src="https://placehold.co/800x400/9C27B0/ffffff?text=楚地灵韵" alt="楚地灵韵体验">
                    <div class="carousel-caption">
                        <h2>楚地灵韵文化之旅</h2>
                        <p>AR技术让历史活起来</p>
                    </div>
                </div>
                <div class="carousel-indicators">
                    <span class="indicator active"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                </div>
            </div>

            <!-- Quick feature modules -->
            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                    <span class="feature-label">景区导览</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                    <span class="feature-label">门票购买</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <span class="feature-label">AR体验</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-ghost"></i>
                    </div>
                    <span class="feature-label">灵韵收集</span>
                </div>
            </div>

            <!-- Cultural heritage section -->
            <div class="section">
                <div class="section-header">
                    <h2 class="module-title">楚文化瑰宝</h2>
                    <div class="view-all">
                        更多 <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="scroll-cards">
                    <div class="culture-card">
                        <div class="card-image">
                            <img src="https://placehold.co/300x200/9C27B0/ffffff?text=文物1" alt="楚文化文物">
                            <div class="card-badge hot">
                                <i class="fas fa-fire"></i> 热门
                            </div>
                        </div>
                        <div class="card-info">
                            <h3>编钟</h3>
                            <p>楚国青铜礼乐器，代表楚文化音乐成就</p>
                            <div class="ar-tag">
                                <i class="fas fa-vr-cardboard"></i> AR展示
                            </div>
                        </div>
                    </div>
                    <div class="culture-card">
                        <div class="card-image">
                            <img src="https://placehold.co/300x200/9C27B0/ffffff?text=文物2" alt="楚文化文物">
                        </div>
                        <div class="card-info">
                            <h3>越王勾践剑</h3>
                            <p>春秋晚期越国青铜剑，工艺精湛</p>
                            <div class="ar-tag">
                                <i class="fas fa-vr-cardboard"></i> AR展示
                            </div>
                        </div>
                    </div>
                    <div class="culture-card">
                        <div class="card-image">
                            <img src="https://placehold.co/300x200/9C27B0/ffffff?text=文物3" alt="楚文化文物">
                        </div>
                        <div class="card-info">
                            <h3>凤鸟玉佩</h3>
                            <p>楚国贵族饰品，象征高贵与权力</p>
                            <div class="ar-tag">
                                <i class="fas fa-vr-cardboard"></i> AR展示
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Upcoming events -->
            <div class="section">
                <div class="section-header">
                    <h2 class="module-title">近期活动</h2>
                    <div class="view-all">
                        日历 <i class="fas fa-calendar-alt"></i>
                    </div>
                </div>
                <div class="activity-list">
                    <div class="activity-card">
                        <div class="activity-time">
                            <span class="date">6月</span>
                            <span class="day">15</span>
                        </div>
                        <div class="activity-details">
                            <h3>楚辞诵读会</h3>
                            <div class="activity-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>屈子祠</span>
                            </div>
                            <div class="activity-description">
                                体验屈原诗歌的韵律美，感受楚辞的独特魅力。
                            </div>
                            <div class="activity-tag">
                                <span class="tag">文化</span>
                                <span class="tag">诗歌</span>
                            </div>
                        </div>
                    </div>

                    <div class="activity-card">
                        <div class="activity-time">
                            <span class="date">6月</span>
                            <span class="day">18</span>
                        </div>
                        <div class="activity-details">
                            <h3>楚文化非遗展示</h3>
                            <div class="activity-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>湖南省博物馆</span>
                            </div>
                            <div class="activity-description">
                                展示湘绣、楚歌等非物质文化遗产，可参与互动体验。
                            </div>
                            <div class="activity-tag">
                                <span class="tag">非遗</span>
                                <span class="tag">展览</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Spirit collection -->
            <div class="section">
                <div class="section-header">
                    <h2 class="module-title">我的灵韵收藏</h2>
                    <div class="view-all">
                        全部 <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="spirit-collection">
                    <div class="spirit-avatar">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=屈原" alt="屈原">
                        <span class="spirit-name">屈原</span>
                    </div>
                    <div class="spirit-avatar">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=楚王" alt="楚王">
                        <span class="spirit-name">楚王</span>
                    </div>
                    <div class="spirit-avatar locked">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=?" alt="未解锁">
                        <span class="spirit-name">未解锁</span>
                    </div>
                    <div class="spirit-avatar locked">
                        <img src="https://placehold.co/200x200/9C27B0/ffffff?text=?" alt="未解锁">
                        <span class="spirit-name">未解锁</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom navigation -->
        <div class="bottom-nav">
            <div class="nav-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-map-marked-alt"></i>
                <span>导览</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-qrcode"></i>
                <span>扫一扫</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-ghost"></i>
                <span>灵韵</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- Floating AR scan button -->
        <div class="fab">
            <i class="fas fa-camera"></i>
        </div>
    </div>
</body>
</html> 